<template>
	<view class="content">
		<view class="tabs-wrap">
			<uv-tabs :current="active" :list="list" @click="onTabChange" :activeStyle="activeStyle" lineWidth="65"
				lineColor="#FF8535" :itemStyle="itemStyle"></uv-tabs>
		</view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in userList" :key="index">
				<image src="" mode="aspectFill" class="avatar"></image>
					
				<view class="info" :style="{justifyContent:active==0?'space-between':'center'}">
					<block v-if="active==0">
						<view style="display: flex;width: 200rpx;align-items: center;">
							<text class="name" style="margin-right: 14rpx;">{{item.name}}</text>
							<uv-tags text="标签" plain size="mini"></uv-tags>
						</view>
						<text class="note">{{item.note}}</text>
					</block>
					<block v-else>
						<view style="display: flex;width: 200rpx;align-items: center;">
							<text class="name" style="margin-right: 14rpx;">{{item.name}}</text>
							<uv-tags text="标签" plain size="mini"></uv-tags>
						</view>
					</block>
				</view>
					
				<view class="fixed-right-text" @click="toDetail">
					<uv-icon name="arrow-right" v-if="active==0"></uv-icon>
					<view style="display:flex;align-items:center" v-else>
						<text class="status-text"
							style="color:#FF8535;margin-right:4rpx">写评价</text>
						<uv-icon name="arrow-right"  color="#FF8535"></uv-icon>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				active: 0,
				list: [{
					name: '已评价(10)',
				}, {
					name: '未评价(20)',
				}],
				userList: [{
						name: '小明',
						status: 1,
						avatar: '',
						text: '到课',
						note: '已评价'
					},
					{
						name: '小明',
						status: 2,
						avatar: '',
						text: '请假',
						note: '已评价'
					}
				]
			}
		},
		computed: {
			itemStyle() {
				return {
					flex: '1',
					height: '40px'
					// height:'80px'
				}
			},
			activeStyle() {
				return {
					color: '#FF8535'
				}
			}
		},
		methods:{
			onTabChange({index}){
				this.active=index
			},
			toDetail(){
				uni.navigateTo({
					url: '/pages/course/assess/detail',
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f8fa;
	}
	.tabs-wrap{
		height: 108rpx;
		background: #FFFFFF;
		
		box-sizing: border-box;
		/* 描边 */
		border-width: 0px 0px 1px 0px;
		border-style: solid;
		border-color: rgba(230, 229, 231, 0.8);
	}
	.list {
		&-item {
			position: relative;
			display: flex;
			align-items: center;
			height: 160rpx;
			opacity: 1;
			background: #FFFFFF;
			padding: 12rpx 40rpx 12rpx 48rpx;
			box-sizing: border-box;
			border-width: 0px 0px 1px 0px;
			border-style: solid;
			border-color: rgba(230, 229, 231, 0.8);
	
			.avatar {
				width: 112rpx;
				height: 112rpx;
				opacity: 1;
				border-radius: 50%;
				background-color: orangered;
			}
	
			.info {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				justify-content: space-between;
				width: 96rpx;
				height: 85rpx;
				text-align: left;
				margin-left: 30rpx;
	
				.name {
					opacity: 1;
					font-family: 苹方-简;
					font-size: 32rpx;
					font-weight: 500;
					line-height: 38rpx;
					text-align: center;
					letter-spacing: 0px;
	
					color: #3D3D3D;
				}
	
				.note {
					opacity: 0.7;
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 38rpx;
					letter-spacing: 0px;
	
					font-variation-settings: "opsz" auto;
					color: #3D3D3D;
				}
			}
	
			.fixed-right-text {
				position: absolute;
				top: 50%;
				/* 将图标定位到父元素顶部的中间位置 */
				transform: translateY(-50%);
				/* 使用transform属性将图标向上移动自身高度一半的距禿，实现居中效果 */
				right: 40rpx;
	
				/* 将图标定位到父元素的最右侧 */
				// width: 30px;
				// height: 30px;
				// border: 1px solid red;
				.status-text {
					font-family: 苹方-简;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 38rpx;
					text-align: right;
					letter-spacing: 0px;
				}
	
			}
		}
	}
</style>